import ChartWithoutAxis from './chartWithoutAxis';
import { pxToRem, pxToPx } from '../../utils/adaptive.js';
import jqy from "jquery";
class RadarChart extends ChartWithoutAxis {
    constructor() {
        super();
    }

    getOption(params) {
        let chartData = params.chartData;
        let chartInfo = params.chartInfo;
        super.getOption({ chartData, chartInfo });
        this.addPolar(chartData, chartInfo);
        this.addSeries(chartData, chartInfo);
        if (jqy.trim(chartData.title) == "人均指标完成情况") {
            this.setLegend(chartData);
        }
        return this.option;
    }

    //获取基础信息
    getBaseChartInfor(chartData) {
        let classify = [];  //极坐标类型
        let maxScope = [];  //最大值
        let actualFinish = [];
        let budgetValue = [];
        if (chartData && chartData.measures && chartData.measures.length > 0) {
            if (chartData.isConvert && chartData.isConvert == "false") {
                classify = chartData[chartData.dimension.fieldName];
                chartData.measures.map((item, i) => {
                    const legendItemName = item.text;
                    if (legendItemName == "签约") {
                        const budgetValueData = chartData[item.fieldName];
                        if(!!budgetValueData){
                            for (var i in budgetValueData) {
                                budgetValue.push(Math.round(budgetValueData[i]));
                            }
                        }else{
                            budgetValue.push(0);
                        }
                        
                    } else {
                        const actualFinishData = chartData[item.fieldName];
                        if(!!actualFinishData){
                            for (var i in actualFinishData) {
                                actualFinish.push(Math.round(actualFinishData[i]));
                            }
                        }else{
                            actualFinish.push(0);
                        }
                    }
                })
            } else {
                let measures = chartData.measures;
                for (var item of measures) {
                    if (!/全年预算/.test(item.text)) {
                        classify.push(item.text);
                        if(!!chartData[item.fieldName]){
                            actualFinish.push(Math.round(chartData[item.fieldName][0]));
                        }else{
                            actualFinish.push(0);
                        }
                    }
                }
                for (var item of measures) {
                    for (var ele of classify) {
                        var len = ele.split("").length;
                        if (item.text.substr(0, len) == ele && ele !== item.text) {
                            // budgetValue.push(Math.round(chartData[item.fieldName][0]));
                            if(!!chartData[item.fieldName]){
                                budgetValue.push(Math.round(chartData[item.fieldName][0]));
                            }else{
                                budgetValue.push(0);
                            }
                        }
                    }
                }
            }
        }
        for (var i in actualFinish) {
            if (Math.abs(actualFinish[i]) > Math.abs(budgetValue[i])) {
                maxScope.push(Math.abs(actualFinish[i]));
            } else {
                maxScope.push(Math.abs(budgetValue[i]));
            }
        }
        return {
            classify,
            maxScope,
            budgetValue,
            actualFinish
        }
    }

    //添加极坐标
    addPolar(chartData, chartInfo) {
        let polarItem = {}, indicatorItem, indicator = [];
        let letterArr = ["a", "b", "c", "d", "e"];
        let getBaseChartInfor = this.getBaseChartInfor(chartData);
        let classify = getBaseChartInfor.classify;
        let maxScope = getBaseChartInfor.maxScope;
        let budgetValue = getBaseChartInfor.budgetValue;
        let actualFinish = getBaseChartInfor.actualFinish;
        for (var i in classify) {
            indicatorItem = {};
            const len = Math.ceil(classify[i].length / 2);
            if (i == 0) {
                if (classify[i].length >= 7) {
                    indicatorItem.name = chartData.title + "," + actualFinish[i] + "," + budgetValue[i] + "," + classify[i].substr(0, len) + "," + classify[i].substr(len);
                } else {
                    indicatorItem.name = chartData.title + "," + actualFinish[i] + "," + budgetValue[i] + "," + classify[i];
                }
            } else {
                if (classify[i].length >= 7) {
                    indicatorItem.name = "" + "," + actualFinish[i] + "," + budgetValue[i] + "," + classify[i].substr(0, len) + "," + classify[i].substr(len);
                } else {
                    indicatorItem.name = "" + "," + actualFinish[i] + "," + budgetValue[i] + "," + classify[i];
                }
            }

            // indicatorItem.max = maxScope[i];
            indicator.push(indicatorItem);
        }
        polarItem.indicator = indicator;
        polarItem.center = chartData.isConvert && chartData.isConvert === "false" ? ['45%', '50%'] : ['50%', '50%'];
        polarItem.shape = 'circle';
        polarItem.splitNumber = 7;
        polarItem.radius = chartData.isConvert && chartData.isConvert === "false" ? `${pxToPx(110)}` : `${pxToPx(62)}`;
        const formatterA = {
            fontSize: pxToPx(11.33),
            align: "center",
            fontFamily: chartInfo.fontFamily,
            // lineHeight: 24,
            lineHeight: pxToPx(24),
        };
        const formatterB = {
            fontSize: pxToPx(11.67),
            align: "center",
            fontFamily: chartInfo.fontFamily,
            // lineHeight: 16.33,
            lineHeight: pxToPx(16.33),
        };
        const formatterC = {
            fontSize: pxToPx(10),
            align: "center",
            fontFamily: chartInfo.fontFamily,
            // lineHeight: 11.67,
            lineHeight: pxToPx(14),
        };
        polarItem.name = {
            show: true,
            verticalAlign: "bottom",
            padding: 0,
            formatter: function (value, indicator) {
                let valueArr = value.split(",");
                let detail = [];
                for (var item in valueArr) {
                    if (valueArr[item] !== "") {
                        detail.push("{" + letterArr[item] + "|" + valueArr[item] + "}");
                    }
                }
                return detail.join('\n');
            },
            rich: {
                a: {
                    color: chartInfo.richTextColor[3],
                    ...formatterA
                },
                b: {
                    color: chartInfo.richTextColor[0],
                    ...formatterB
                },
                c: {
                    color: chartInfo.richTextColor[1],
                    ...formatterB
                },
                d: {
                    color: chartInfo.richTextColor[2],
                    ...formatterC
                },
                e: {
                    color: chartInfo.richTextColor[2],
                    ...formatterC
                },
            }
        };
        polarItem.nameGap = chartData.isConvert && chartData.isConvert === "false" ? pxToPx(10) : pxToPx(2.77);
        polarItem.axisLine = {  //circle 坐标轴颜色
            lineStyle: {
                width: 0.5,
                color: chartInfo.axisLineColor
            }
        };
        polarItem.splitLine = {  //划分circle的分割线颜色
            show: true,
            lineStyle: {
                width: 0.5,
                color: chartInfo.splitLineColor.reverse(),
            }
        };
        polarItem.splitArea = { // 图表背景的颜色
            show: true,
            areaStyle: {
                color: chartData.isConvert && chartData.isConvert === "false" ? chartInfo.splitAreaColor[1] : chartInfo.splitAreaColor[0],
                opacity: 0.36
            },
        };

        this.option.polar = polarItem;
    }

    //设置legend值
    setLegend(chartData) {
        if (chartData.isConvert && chartData.isConvert === "false") {
            this.option.legend.right = 0;
            this.option.legend.top = "middle";
            this.option.legend.orient = "vertical";
            this.option.legend.bottom = "auto";
            this.option.legend.left = "auto";
            this.option.legend.data = [{ name: "签约", icon: 'circle', textStyle: { fontSize: pxToPx(10) } }, { name: "回款", icon: 'circle', textStyle: { fontSize: pxToPx(10) } }];
        } else {
            this.option.legend.data = [{ name: "全年预算", icon: 'circle', textStyle: { fontSize: pxToPx(10) } }, { name: "实际完成", icon: 'circle', textStyle: { fontSize: pxToPx(10) } }];
        }
    }

    // 添加series数据
    addSeries(chartData, chartInfo) {
        let getBaseChartInfor = this.getBaseChartInfor(chartData);
        let budgetValue = getBaseChartInfor.budgetValue;
        let actualFinish = getBaseChartInfor.actualFinish;
        let classify = getBaseChartInfor.classify;
        let serie = {
            name: chartData.title,
            type: 'radar',
            data: [],
            tooltip:{}
        }
        let itemData;
        let data = [];
        const radialAttr = {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 1,
            globalCoord: false,
        };
        const linearAttr = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            globalCoord: false,
        };
        for (var i = 0; i < 2; i++) {
            itemData = {};
            if (i == 1) {
                itemData.value = actualFinish;
                itemData.name = chartData.isConvert && chartData.isConvert === "false" ? "回款" : "实际完成";
                itemData.areaStyle = {
                    normal: {
                        color: {
                            ...radialAttr,
                            colorStops: [{
                                offset: 0, color: chartInfo.radialColor[i][0],
                            }, {
                                offset: 0.5, color: chartInfo.radialColor[i][1],
                            }, {
                                offset: 1, color: chartInfo.radialColor[i][2],
                            }],

                        },
                        opacity: 0.4
                    }
                }
                itemData.lineStyle = {
                    normal: {
                        color: {
                            ...linearAttr,
                            colorStops: [{
                                offset: 0, color: chartInfo.linearColor[i][0],
                            }, {
                                offset: 0.5, color: chartInfo.linearColor[i][1],
                            }, {
                                offset: 1, color: chartInfo.linearColor[i][2],
                            }],
                        },
                        width: 1.33,
                    }
                }
            } else {
                itemData.value = budgetValue;
                itemData.name = chartData.isConvert && chartData.isConvert === "false" ? "签约" : "全年预算";
                itemData.areaStyle = {
                    normal: {
                        color: {
                            ...radialAttr,
                            colorStops: [{
                                offset: 0, color: chartInfo.radialColor[i][0],
                            }, {
                                offset: 0.5, color: chartInfo.radialColor[i][1],
                            }, {
                                offset: 1, color: chartInfo.radialColor[i][2],
                            }],
                        },
                        opacity: 0.4
                    }
                }
                itemData.lineStyle = {
                    normal: {
                        color: {
                            ...linearAttr,
                            colorStops: [{
                                offset: 0, color: chartInfo.linearColor[i][0],
                            }, {
                                offset: 0.5, color: chartInfo.linearColor[i][1],
                            }, {
                                offset: 1, color: chartInfo.linearColor[i][2],
                            }],
                        },
                        width: 1.33,
                    }
                }
            }
            itemData.itemStyle = {   //图例颜色
                normal: {
                    color: chartInfo.legendcolors[i],
                },
            };
            itemData.symbol = 'none';
            data.push(itemData);
        }
        serie.data = data;
        serie.tooltip.formatter=function(data){
            let resultTootip=data.seriesName+'-'+data.name+' <br />';
            for(let item in classify){
                resultTootip+=classify[item]+': '+data.value[item]+' <br />';
            }
            return resultTootip;
        }
        serie.tooltip.position= ['10%', '10%'];
        this.option.series.push(serie);
    }
}

export default RadarChart;